<!--
 * @Author: 谢陈洁
 * @Date: 2025-03-24 16:19:16
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-03-24 16:58:19
 * @Description: file content
-->
<template>
	<view class="uni-popup">
		<view class="header">
			壁纸评分
			<view class="close" @click="close">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
		</view>
		<view class="content">
			<view class="score">
				<uni-rate touchable v-model="userScore" size="32" />
				{{ userScore }}分
			</view>
			<button class="rate-button" type="default" :disabled="!userScore" size="mini" plain
				@click="handleRate">确定评分</button>
		</view>
	</view>
</template>

<script setup>
	import {
		apiScore
	} from '@/service/apis/home'

	const props = defineProps({
		info: Object
	})
	const userScore = ref(props.info.score)
	const emit = defineEmits(['close'])
	const close = () => {
		emit('close', false)
	}
	const handleRate = async () => {
		uni.showLoading({
			title: '加载中...'
		})
		const {
			classid,
			_id: wallId
		} = props.info
		await apiScore({
			classid,
			wallId,
			userScore: userScore.value
		})
		uni.hideLoading()
		close()
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		background-color: white;
		border-radius: 30rpx;
		padding: 30rpx;

		.header {
			text-align: center;
			padding: 30rpx;

			.close {
				position: absolute;
				padding: 30rpx;
				right: 0;
				top: 0;
			}
		}

		.content {
			width: 70vw;
			display: flex;
			gap: 40rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.score {
				display: flex;
				align-items: center;
				gap: 10rpx;
				color: #FFCA3E;
			}
		}
	}
</style>